<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../../layout/base/base.css">
    <link rel="stylesheet" href="com-select.css">
    <script src="../../lib/jquery.js"></script>
    <script src="com-select.js"></script>
    <style>
        .demo{
            width:800px;
            min-height: 400px;
            margin:0 auto;
            padding:10px;
            border: 1px solid #ebebeb;
        }
    </style>
</head>
<body>

    <div class="feat-grid feat-reset demo clearfix">

        <section id="a2" class="com-select" style="width: 200px;">
            <div class="sel-item">
                <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                <input type="hidden" value="">
                <i class="sel-icon"></i>
            </div>
            <ul class="sel-content">
                <li data-val="1" class="sel-list">1a</li>
                <li data-val="2" class="sel-list">2a1</li>
                <li data-val="3" class="sel-list">3a</li>
                <li data-val="2" class="sel-list">server@lisa.com</li>
                <li data-val="3" class="sel-list">server@jack.com</li>
            </ul>
        </section>
        <section id="a1" class="com-select" style="width: 200px;">
            <div class="sel-item">
                <input class="sel-head" type="text" value="" readonly UNSELECTABLE="on" placeholder="请选择"/>
                <input type="hidden" value="">
                <i class="sel-icon"></i>
            </div>
            <ul class="sel-content">
                <li data-val="1" class="sel-list">1a</li>
                <li data-val="2" class="sel-list">2a1</li>
                <li data-val="3" class="sel-list">3a</li>
            </ul>
        </section>
    </div>


    <script>

        var arr = [
            {
                value:1,
                name:'苹果'
            },
            {
                value:2,
                name:'橘子'
            }
        ];


        var obj = $('#a2').comSelect({
            init:false,
            search:true,
            searchReg:true,
            remote:null,
            callback:function(val,text){
                console.log(val)
            }
        });

        setTimeout(function(){
            obj.init(3)
        },2000)

        /*$('#a1').comSelect({
            init:false,
            search:true,
            remote:{
                request:function(text){
                    console.log(text);
                    return arr;
                },
                time:500
            },
            callback:function(val,text){
                console.log(val)
            }
        });*/
    </script>
</body>
</html>